﻿var sun = new Image();
var moon = new Image();
var earth = new Image();
function init() {
    sun.src = 'images/sun.png';
    moon.src = 'images/moon.png';
    earth.src = 'images/earth.png';
    setInterval(draw, 25);
}

function draw() {
    var ctx = document.getElementById('canvas').getContext('2d');
    ctx.globalCompositeOperation = 'destination-over';
    // наложение графики, т.е. новая фигура перекрывается старой(реализует затенение Луны)
    ctx.clearRect(0, 0, 300, 300);  // очистка холста
    ctx.fillStyle = 'rgba(0,0,0,0.4)';  // цвет заливки
    ctx.strokeStyle = 'rgba(0,153,255,0.4)';    // цвет линии контура
    ctx.save(); // сохранение текущего состояния холста
    ctx.translate(150, 150);    // перемещение начала системы координат

    // Земля
    var time = new Date();
    ctx.rotate(((2 * Math.PI) / 60) * time.getSeconds() + ((2 * Math.PI) / 60000) * time.getMilliseconds());
    // поворот системы координат
    ctx.translate(105, 0);
    ctx.fillRect(0, -14, 40, 28);   // рисуем тень
    ctx.drawImage(earth, -15, -15, 30, 30);

    // Луна
    ctx.save();
    ctx.rotate(((2 * Math.PI) / 6) * time.getSeconds() + ((2 * Math.PI) / 6000) * time.getMilliseconds());
    ctx.translate(0, 28.5);
    ctx.drawImage(moon, -5.5, -5.5, 11, 11);
    ctx.restore();
    ctx.restore();

    ctx.beginPath();
    ctx.arc(150, 150, 105, 0, Math.PI * 2, false);  // орбита Земли
    ctx.stroke();

    ctx.drawImage(sun, 120, 120, 60, 60);
}

init();